<link rel="stylesheet" href="__PUBLIC__/js/jquery-upload/css/jquery.fileupload.css" />
<link rel="stylesheet" href="__PUBLIC__/js/jquery-upload/css/jquery.fileupload-ui.css" />

<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">规格设置</h4>
        </div>
        <form style="padding:4%;height:500px;overflow-y:auto;" id="addGoodsForm" data-toggle="validator" role="form">
            
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>{$goodsInfo.spec_1}</th>
                        <if condition="$goodsInfo['spec_2']">
                            <th>{$goodsInfo.spec_2}</th>
                        </if>
                        <th>价格</th>
                        <th>积分</th>
                        <th>库存</th>
                        <th>图片</th>
                    </tr>
                </thead>
                <tbody id="spec_body">
                <volist name="goodsInfo['goods_spec']" id="gs">
                    <tr>
                        <td><input type="text" name="spec_1[]" value="{$gs.spec_1}" class="form-control" /></td>
                        <if condition="$goodsInfo['spec_2']">
                            <td><input type="text" name="spec_2[]" value="{$gs.spec_2}" class="form-control" /></td>
                        </if>
                        <td><input type="text" name="spec_price[]" value="{$gs.spec_price}" class="form-control" /></td>
                        <td><input type="text" name="spec_integral[]" value="{$gs.spec_integral}"  class="form-control" /></td>
                        <td><input type="text" name="stock[]" value="{$gs.stock}" class="form-control"/></td>
                        <td>
                        <if condition="$gs['spec_img']">
                            <span class="upload"><img src="__ROOT__{$gs.spec_img}" width='50px' /></span>
                            <else />
                            <span class="upload">上传</span>
                        </if>
                            <input type="hidden" name="spec_img[]" value="{$gs.spec_img}" />
                        </td>
                        <input type="hidden" name="spec_id[]" value="{$gs.id}" />
                    </tr>
                    
                </volist>
                    <tr>
                        <td><input type="text" name="spec_1[]" class="form-control" /></td>
                        <if condition="$goodsInfo['spec_2']">
                            <td><input type="text" name="spec_2[]" class="form-control" /></td>
                        </if>
                        <td><input type="text" name="spec_price[]" class="form-control" /></td>
                        <td><input type="text" name="spec_integral[]" class="form-control" /></td>
                        <td><input type="text" name="stock[]" class="form-control"/></td>
                        <td>
                            <span class="upload">上传</span>
                            <input type="hidden" name="spec_img[]" class="form-control" />
                        </td>
                        <input type="hidden" name="spec_id[]" value="" />
                    </tr>
                </tbody>
            </table>
            <input id="fileupload" type="file" name="files[]" multiple style="display: none;">
            <input type="hidden" name="id" value="{$goodsInfo.id}" />
        </form>
        <div class="modal-footer">
            <button type="button" id="addSpec" class="btn btn-default">增加规格</button>
            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
            <button type="button" id="userSave" class="btn btn-primary">保存</button>
        </div>
    </div>
</div>
<script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.fileupload-ui.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.fileupload-process.js"></script>

<script>
    var ROOTPATH = "__ROOT__";
    var goods_spec_2 = "{$goodsInfo.spec_2}";
    var domSpan = null;
    $('#fileupload').fileupload({
        url: "{:U('Admin/Upload/index')}",
        dataType: "",
        formData: {type: "goods"},
        autoUpload: true,
        done: function (e, data) {
            var files = data.result;
            var file = files[0];
            console.log(file.filePath);
            $(domSpan).html("<img src='"+ROOTPATH+file.filePath+"' width='50px' />");
            $(domSpan).next("input[name='spec_img[]']").val(file.filePath);
            domSpan = null;
            //$("#userAvatarImg").attr("src",ROOTPATH+file.filePath);
            //$("#goods_imgs").val(file.filePath);
        }
    });
    
    $("#spec_body").on('click','.upload',function(){
        domSpan = $(this);
        $('#fileupload').click();
    })
    
    $("#addSpec").click(function(){
        var spec_2 = '';
        if(goods_spec_2 != ''){
            spec_2 ='<td><input type="text" name="spec_2[]" class="form-control" /></td>';
        }
        var html = '<tr>'+
                        '<td><input type="text" name="spec_1[]" class="form-control" /></td>'+
                        spec_2+
                        '<td><input type="text" name="spec_price[]" class="form-control" /></td>'+
                        '<td><input type="text" name="spec_integral[]" class="form-control" /></td>'+
                        '<td><input type="text" name="stock[]" class="form-control"/></td>'+
                        '<td><span class="upload">上传</span><input type="hidden" name="spec_img[]" /></td><input type="hidden" name="spec_id[]" value="" />'+
                    '</tr>';
        $("#spec_body").append(html);
    })
    
    $("#userSave").click(function(){
        $.ajax({
                url: "{:U('Admin/Goods/doAddGoodsSpec')}",
                type: "post",
                dataType: "json",
                data: $("#addGoodsForm").serialize(),
                success: function (data) {
                    $("#commonModal").modal('toggle');
                    common.alert("提示", "规格添加成功!");
                }
            })
    })
</script>